<template>
    <div class="body">
        <el-form ref="ruleForm" :model="mdl" label-width="130px">
            <el-form-item label="优惠券名称" required>
                <el-input
                size="medium"
                style="width:90%"
                v-model="mdl.name"
                placeholder="请输入优惠券名称"
                />
            </el-form-item>
            <el-form-item label="优惠券类型" required>
                <el-radio-group v-model="mdl.couponType" @change="changeRadio">
                    <el-radio :label="0">指定金额券</el-radio>
                    <el-radio :label="1">区间折扣卷</el-radio>
                    <el-radio :label="2">满减券</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="优惠金额" required v-if="mdl.couponType == 0 || radioIndex == 0">
                <el-input size="medium" style="width:90%" v-model="mdl.amount" type="text" placeholder="优惠金额" /> 元
            </el-form-item>
            <el-form-item label="优惠折扣" required v-if="mdl.couponType == 1 || radioIndex == 1">
                <el-input size="medium" style="width:90%" v-model="mdl.discount" type="text" placeholder="优惠折扣" /> 折
            </el-form-item>
            <el-form-item label="满减优惠" required v-if="mdl.couponType == 2 || radioIndex == 2">
                满
                <el-input size="medium" style="width:100px" v-model="mdl.full" type="text" />
                减
                <el-input size="medium" style="width:100px" v-model="mdl.subtract" type="text" />
            </el-form-item>
            <el-form-item label="有效时间" required>
                <el-date-picker
                  style="width:90%"
                  v-model="time"
                  type="datetimerange"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="备注" required>
                <el-input size="medium" style="width:90%" v-model="mdl.remark" type="textarea"
  :autosize="{ minRows: 2, maxRows: 4}" placeholder="优惠介绍" />
            </el-form-item>

            <!-- <el-form-item label="发放方式" required>
                <el-select v-model="mdl.giveOutType" placeholder="请选择">
                  <el-option value="0" label="系统发放"/>
                  <el-option value="1" label="用户领取"/>
                </el-select>
            </el-form-item> -->

            <el-form-item label="是否推荐" required>
                <el-radio-group v-model="mdl.suggest">
                    <el-radio :label="0">否</el-radio>
                    <el-radio :label="1">是</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <div class="foot_btn">
            <el-button
                type="primary"
                :loading="submitLoading"
                @click="submitForm('ruleForm')"
            >提交</el-button>
            <el-button @click="handleCloseDrawer">取消</el-button>
        </div>
    </div>
</template>

<script>
import { addCoupon,updateCoupon } from '@/api/user'
export default {
  name: 'FormModel',
  props: {
    mdl: {
      type: Object,
      required: true
    },
    handleCloseDrawer: {
      type: Function,
      required: true
    }
  },
  data() {
    return {
      submitLoading: false,
      uploadData: null,
      imgList: [],
      
      time:[],

      radioIndex:-1
    }
  },
  mounted() {
    console.log(this.mdl)
    this.$set(this.time,0,this.mdl.startTime);//回显的日期
    this.$set(this.time,1,this.mdl.endTime)//回显的日期 
  },
  methods: {

    // 单选切换
    changeRadio(index){
        this.radioIndex = index
    },
    
    // 提交
    submitForm() {
        if (this.mdl.id) {
            this.mdl.roomId = this.mdl.id
        }
        this.mdl.giveOutType = '0'
        this.mdl.startTime = this.time[0]
        this.mdl.endTime = this.time[1]
        console.log(this.mdl)
        const request = this.mdl.id ? updateCoupon(this.mdl) : addCoupon(this.mdl)
        request.then((res) => {
            if (res.statusCode === '00000') {
                this.$message({ message: '提交成功', type: 'success' })
                // 关闭弹窗
                this.handleCloseDrawer()
                // 调用父级组件刷新数据
                this.$emit('getList')
            }
        })
        .catch((error) => {
          console.log(error)
        })
        .finally(() => {
        })
    }
  }
}
</script>

<style lang="less" scoped>
.body {
  padding-right: 25px;
  .foot_btn{
    width:150px;
    margin: 0 auto;
  }
}

/deep/ .el-checkbox__label {
  font-size: 12px;
}
</style>
